<?php
/**
 * Copyright © 2013-2017 Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
?>
<div class="row">
    <div class="add-video-button-container">
        <button
            id="add_video_button"
            title="<?php /* @escapeNotVerified */ echo $addVideoTitle;?>"
            type="button"
            class="action-secondary"
            onclick="jQuery('#new-video').modal('openModal'); jQuery('#new_video_form')[0].reset();"
            data-ui-id="widget-button-1">
            <span><?php /* @escapeNotVerified */ echo __('Add video') ?></span>
        </button>
    </div>
</div>
<div id="<?php /* @escapeNotVerified */ echo $htmlId;?>-container"
     class="images"
     data-mage-init='{"baseImage":{}}'
     data-max-file-size="<?php /* @escapeNotVerified */ echo $fileMaxSize;?>"
    >
    <div class="image image-placeholder">
        <input type="file" name="image" data-url="<?php 
        /* @escapeNotVerified */ echo $uploadUrl;?>" multiple="multiple" />
        <img class="spacer" src="<?php /* @escapeNotVerified */ echo $spacerImage;?>"/>
        <p class="image-placeholder-text"><?php /* @escapeNotVerified */ echo $imagePlaceholderText;?></p>
    </div>
    <script id="<?php /* @escapeNotVerified */ echo $htmlId;?>-template"
            data-template="image"
            type="text/x-magento-template">
        <div class="image">
            <img class="spacer" src="<?php /* @escapeNotVerified */ echo $spacerImage;?>"/>
            <img
                class="product-image"
                src="<%- data.url %>"
                data-position="<%- data.position %>"
                alt="<%- data.label %>" />
            <div class="actions">
                <button
                    type="button"
                    class="action-delete"
                    data-role="delete-button"
                    title="<?php /* @escapeNotVerified */ echo $deleteImageText;?>">
                    <span><?php /* @escapeNotVerified */ echo $deleteImageText;?></span>
                </button>
                <button
                    type="button"
                    class="action-make-base"
                    data-role="make-base-button"
                    title="<?php /* @escapeNotVerified */ echo $makeBaseText;?>">
                    <span><?php /* @escapeNotVerified */ echo $makeBaseText;?></span>
                </button>
                <div class="draggable-handle"></div>
            </div>
            <div class="image-label"></div>
            <div class="image-fade"><span><?php /* @escapeNotVerified */ echo $hiddenText;?></span></div>
        </div>
    </script>
</div>
<span class="action-manage-images" data-activate-tab="image-management">
    <span><?php /* @escapeNotVerified */ echo $imageManagementText;?></span>
</span>
<script>
    require([
        'jquery'
    ],function($){

        'use strict';

        $('[data-activate-tab=image-management]')
            .on('click.toggleImageManagementTab', function() {
                $('#product_info_tabs_image-management').trigger('click');
            });
    });
</script>
